<template>
  <div class="diseaseBank">
    <div class="select-box">
      <div class="select-box-container">
        <div class="select-box-item flexItem">
          <span class="label">关联品种：</span>
          <span class="noData" v-show="fishVarietyList.length == 0">暂无品种</span>
          <el-select  style="width:300px;" clearable filterable v-model="formData.fishVarietyId" placeholder="请选择" @change="qureyFeaturesTypeManage(formData.fishVarietyId)">
            <el-option v-for="item in fishVarietyList" :key="item.fishVarietyId" :label="item.varietyName" :value="item.fishVarietyId">
            </el-option>
          </el-select>
          <!-- <div class="item" v-show="fishVarietyList.length"
                        :class="formData.fishVarietyId == item.fishVarietyId ? 'itemActive' : ''"
                        @click="() => { formData.fishVarietyId = item.fishVarietyId; qureyFeaturesTypeManage(formData.fishVarietyId) }"
                        v-for="item of fishVarietyList" :key="item.fishVarietyId">{{ item.varietyName }}
                    </div> -->
        </div>
        <div class="select-box-item flex" v-for="(item, index) of BOList" :key="index">
          <div class="select-box-item-child children">
            <div class="select-box-item flexItem">
              <span class="label">诊断项名称：</span>
              <span  style="width:300px;" class="noData" v-show="FeaturesTypeManageList.length == 0">暂无诊断项</span>
              <el-select  style="width:300px;" v-show="FeaturesTypeManageList.length > 0" clearable filterable v-model="item.diagnosisItemId" placeholder="请选择" @change="changeFeaturesType(item.diagnosisItemId,index)">
                <el-option :disabled="disabledList.indexOf(items.diagnosisItemId) !== -1?true:false" v-for="items in FeaturesTypeManageList" :key="items.diagnosisItemId+'FeaturesType'" :label="returnLabel(items)" :value="items.diagnosisItemId">
                </el-option>
              </el-select>
              <span class="label">诊断项症状： </span>
              <span class="noData" v-show="!item.diagnosisItemId">暂未选择诊断项</span>
              <el-select style="width:600px;" v-show="item.diagnosisItemId" filterable clearable v-model="item.diagnosisItemSymbolNoList" multiple :ref="'ref' + index" @change="updateSelected" collapse-tags>
                <el-option class="selectOption" v-for="item of BOList[index].diseaseFeaturesList" :key="item.diagnosisItemSymbolId" :label="item.diagnosisItemSymbolNo + '：' + item.diagnosisItemSymbolDesc" :value="item.diagnosisItemSymbolNo" />
              </el-select>
              <!-- <div class="diagnosisItem">
                <span class="noData" v-show="FeaturesTypeManageList.length == 0">暂无诊断项</span>
                <div v-show="FeaturesTypeManageList.length > 0" class="item" :class="items.diagnosisItemId == item.diagnosisItemId ? 'itemActive' :
                        disabledList.indexOf(items.diagnosisItemId) !== -1 ? 'itemOpacity' : ''" @click="() => { qureyDiseaseFeatures(items.diagnosisItemId, index) }" v-for="items of FeaturesTypeManageList" :key="items.diagnosisItemId + 'FeaturesType'">
                  {{ items.diagnosisItemName }}{{ items.mainFeaturesFlag ? '（主要特征）' : '（辅助特征）' }}
                </div>
              </div> -->
            </div>
            <!-- <div class="select-box-item" style="width:800px;">
              <span class="label">诊断项症状： </span>
              <span class="noData" v-show="!item.diagnosisItemId">暂未选择诊断项</span>
              <el-select style="width:600px;" v-show="item.diagnosisItemId" filterable clearable v-model="item.diagnosisItemSymbolNoList" multiple :ref="'ref' + index" @change="updateSelected" collapse-tags>
                <el-option class="selectOption" v-for="item of BOList[index].diseaseFeaturesList" :key="item.diagnosisItemSymbolId" :label="item.diagnosisItemSymbolNo + '：' + item.diagnosisItemSymbolDesc" :value="item.diagnosisItemSymbolNo" />
              </el-select>

            </div> -->
          </div>
          <div class="select-box-item-child">
            <div v-if="BOList.length !== 1" class="line-click" @click="deleteRow(index, item)"><i class="el-icon-remove-outline"></i></div>
            <div v-if="index === BOList.length - 1" class="line-click" @click="addRow"><i class="el-icon-circle-plus-outline"></i></div>
          </div>
        </div>
      </div>
      <div class="epidemic-database warningText">
        <span>✮</span>推断原则：A、B、C、F是主要判断特征，只要符合其中1-2条或以上即可推定属于该病；D、E是辅助判断特征。
      </div>
    </div>
    <div class="section" v-show="selectNoList.length > 0">
      <div class="section-center">
        <div class="selected-box">
          <span>已选特征:</span>
          <span v-for="(item, index) of formData.diagnosisItemSymbolNoList" :key="index" class="selected-btn">{{ item
                        }}</span>
        </div>
        <div class="picture-box">
          <div class="diagnosis" v-for="(item, index) of selectNoList" :key="index">
            <div class="diagnosis-header">
              <span class="diagnosis-header-title">{{ item.diagnosisItemSymbolNo }}</span>
              <el-tooltip effect="dark" :content="item.diagnosisItemSymbolDesc" placement="top-start">
                <span class="diagnosis-header-desc">{{ item.diagnosisItemSymbolDesc }}</span>
              </el-tooltip>
            </div>
            <div class="diagnosis-body">
              <div class="imgBox" style="width: 100%;height: 100%; position: relative;" v-if="item.src && item.src.length">
                <el-image style="width: 100%;height: 100%;" :src="item.src[0]" fit="scale-down" :preview-src-list="item.src">
                </el-image>
                <div style="position: absolute;right: 0;bottom: 0;padding: 5px 10px;background: #047ffb85; color: #ffffff;">
                  共{{ item.src.length }}张</div>
              </div>
              <span v-else class="diagnosis-body-empty">暂无图片展示</span>
            </div>
          </div>
        </div>
      </div>

      <div class="section-bottom">
        <div class="result-item" v-for="(item, index) of resultList" :key="index + 'result'">
          <div class="result-item-row">
            <span class="result-item-row-title">推断结果：</span>
            <span class="result-item-row-content" style="color: #0480FB; font-weight: bolder;">{{
                        item.diseaseName }}</span>
            <span class="warningText" v-show="diseaseCase[item.diseaseBankId]" @click="showDiseaseCase(item)">查看案例</span>
          </div>
          <div class="result-item-row">
            <span class="result-item-row-title">预防方法：</span>
            <span class="result-item-row-content">{{ item.preventionMethod }}</span>
          </div>
          <div class="result-item-row">
            <span class="result-item-row-title">治疗方法：</span>
            <span class="result-item-row-content">{{ item.therapeuticMethod }}</span>
          </div>
          <div class="result-item-row">
            <span class="result-item-row-title">特殊症状描述：</span>
            <span class="result-item-row-content">{{ item.mainSymptoms ? item.mainSymptoms : '无特殊症状描述'
                            }}</span>
          </div>
          <div class="result-item-row">
            <span class="result-item-row-title">疾病可能性：</span>
            <span class="result-item-row-content">{{ item.ratio ? item.ratio + '%' : '--%' }}</span>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="疾病案例" :visible.sync="dialogVisible" width="53.6%" :before-close="handleClose">
      <el-tabs class="borderCard" type="border-card">
        <el-tab-pane v-for="item, index in showTableData" :key="index" :label="`${item.caseName}(案例${index + 1})`">
          <div class="info">
            <span class="label">疾病名称：</span>
            <span>{{ item.diseaseName }}</span>
          </div>
          <div class="info">
            <span class="label">疾病症状：</span>
            <span>{{ item.mainSymptoms }}</span>
          </div>
          <div class="info">
            <span class="label">防治方法：</span>
            <span>{{ item.preventionMethod }}</span>
          </div>
          <div class="info">
            <span class="label">治疗方法：</span>
            <span>{{ item.therapeuticMethod }}</span>
          </div>
          <div class="imageList" v-if="item.fileIdList.length > 0">
            <el-image class="image" v-for="fileId, index in item.fileIdList" :key="index" style="width: 300px; height: 150px" :src="srcList(item.fileIdList)[index]" :preview-src-list="srcList(item.fileIdList)" fit="scale-down">
            </el-image>
          </div>
          <span v-else class="errText">无相关图片</span>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import MainSlot from "@/components-production-management/MainSlot";
import Pagination from "@/components-production-management/Pagination";
import SearchForm from "@/components-production-management/SearchForm";
import TableData from "@/components-production-management/TableData";
import BtnSlot from "@/components-production-management/BtnSlot";
import diagnosticItemManagement from "@/api/disease-prevention-and-control/features-type.js";
import diseaseCaseManagement from "@/api/disease-prevention-and-control/disease-case-management.js";
import diagnosticItemSymptom from "@/api/disease-prevention-and-control/disease-characteristic-management.js";
import varietyManagement from "@/api/basic-info-manage/fishVariety";

export default {
  components: { MainSlot, Pagination, SearchForm, TableData, BtnSlot },
  data() {
    return {
      loading: false,
      dialogVisible: false,
      showTableData: [],
      // 查询条件：
      formData: { diagnosisItemSymbolNoList: [] },
      fishVarietyList: [], // 下拉数据-品种
      FeaturesTypeManageList: [], // 下拉数据-诊断项
      BOList: [{}],
      selectNoList: [],
      resultList: [], // 查询结果
      disabledList: [],
      diseaseCaseList: [],
      diseaseCase: {},
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    async initData() {
      let { data: fishVarietyList } =
        await varietyManagement.queryByCondition();
      let { data: diseaseCaseList } =
        await diseaseCaseManagement.queryByCondition();
      this.fishVarietyList = fishVarietyList || [];
      this.diseaseCaseList = diseaseCaseList || [];
      this.diseaseCase = {};
      this.diseaseCaseList.forEach((item) => {
        if (!this.diseaseCase[item.diseaseBankId]) {
          this.diseaseCase[item.diseaseBankId] = [];
        }
        this.diseaseCase[item.diseaseBankId].push(item);
      });
      console.log(this.diseaseCase);
    },
    showDiseaseCase(item) {
      let diseaseBankId = item.diseaseBankId;
      this.showTableData = this.diseaseCase[diseaseBankId] || [];
      console.log(this.showTableData);
      console.log(this.showTableData);
      if (this.showTableData.length > 0) {
        this.dialogVisible = true;
      } else {
        this.$message.warning("暂无案例数据");
      }
    },
    returnLabel(items) {
      return `${items.diagnosisItemName}${
        items.mainFeaturesFlag ? "（主要特征）" : "（辅助特征）"
      }`;
    },
    qureyFeaturesTypeManage(e) {
      this.formData.diagnosisItemSymbolNoList = [];
      this.BOList = [{}];
      this.selectNoList = [];
      this.resultList = []; // 查询结果
      this.disabledList = [];
      this.FeaturesTypeManageList = [];
      if (e) {
        diagnosticItemManagement
          .queryByCondition({ fishVarietyId: e })
          .then((res) => {
            this.FeaturesTypeManageList = res.data;
          });
      }
    },
    changeFeaturesType(e, index) {
      // const index = this.FeaturesTypeManageList.findIndex(item => item.diagnosisItemId === e);
      console.log(e, index, "changeFeaturesType");
      this.$set(this.BOList[index], "diagnosisItemId", e);
      if (
        this.disabledList.includes(e) &&
        this.BOList[index].diagnosisItemId !== e
      ) {
        this.$message.info("已有选中的诊断项！");
        return;
      }
      this.disabledList = [];
      this.BOList[index] &&
        this.$set(this.BOList[index], "diagnosisItemSymbolNoList", []);

      diagnosticItemSymptom
        .queryByCondition({ diagnosisItemId: e })
        .then((res) => {
          this.$set(this.BOList[index], "diseaseFeaturesList", res.data);
          this.$set(this.BOList[index], "diagnosisItemId", e);
          this.BOList.forEach((item) => {
            if (item.diagnosisItemId) {
              this.disabledList.push(item.diagnosisItemId);
            }
          });
          this.updateSelected();
        });

      console.log(this.BOList, "BOList");
    },
    qureyDiseaseFeatures(e, index) {
      console.log(e, index, "qureyDiseaseFeatures");
      if (
        this.disabledList.includes(e) &&
        this.BOList[index].diagnosisItemId !== e
      ) {
        this.$message.info("已有选中的诊断项！");
        return;
      }
      this.disabledList = [];
      this.BOList[index] &&
        this.$set(this.BOList[index], "diagnosisItemSymbolNoList", []);
      if (this.BOList[index].diagnosisItemId === e) {
        // this.BOList.splice(index, 1)
        this.$set(this.BOList, index, {
          diseaseFeaturesList: [],
          diagnosisItemId: "",
        });
        this.BOList.forEach((item) => {
          if (item.diagnosisItemId) {
            this.disabledList.push(item.diagnosisItemId);
          }
        });
        console.log(this.BOList);
        this.updateSelected();
      } else {
        diagnosticItemSymptom
          .queryByCondition({ diagnosisItemId: e })
          .then((res) => {
            this.$set(this.BOList[index], "diseaseFeaturesList", res.data);
            this.$set(this.BOList[index], "diagnosisItemId", e);
            this.BOList.forEach((item) => {
              if (item.diagnosisItemId) {
                this.disabledList.push(item.diagnosisItemId);
              }
            });
            this.updateSelected();
          });
      }
      console.log(this.BOList, "BOList");
    },
    updateSelected(e) {
      this.$set(this.formData, "diagnosisItemSymbolNoList", []);
      this.selectNoList = [];
      this.resultList = [];
      console.log(this.BOList, this.formData);
      this.BOList.forEach((item) => {
        if (
          item.diagnosisItemSymbolNoList &&
          item.diagnosisItemSymbolNoList.length
        ) {
          this.formData.diagnosisItemSymbolNoList.push(
            ...item.diagnosisItemSymbolNoList
          ); // 更新需要传给后端的诊断项症状编号
          // 处理中间图片展示的相关数据
          this.formData.diagnosisItemSymbolNoList.forEach((diagnosisItem) => {
            item.diseaseFeaturesList.find((featuresItem) => {
              if (featuresItem.diagnosisItemSymbolNo === diagnosisItem) {
                this.selectNoList.push(featuresItem);
              }
            });
          });
        }
      });
      this.selectNoList.forEach((item) => {
        this.$set(item, "src", []);
        if (item.fileIdList && item.fileIdList.length) {
          item.fileIdList.split(",").forEach(async (fileId) => {
            fileId
              ? item.src.push(
                  `${this.$baseurl.fileServiceUrl}base/files/preview?fileId=${fileId}`
                )
              : "";
          });
        }
      });
      this.judgeDisease();
    },
    judgeDisease() {
      console.log(this.BOList, this.formData);
      diagnosticItemSymptom.judgeDisease(this.formData).then((res) => {
        const data = res.data;
        if (data) {
          this.resultList = data;
        }
      });
    },
    // 点击添加按按钮
    addRow() {
      let list = {};
      console.log(this.FeaturesTypeManageList.length);
      if (!this.formData.fishVarietyId) {
        this.$message.info("请先选择鱼种！");
        return;
      }
      if (this.BOList.length < this.FeaturesTypeManageList.length) {
        this.BOList.push(list);
      } else {
        this.$message.info(
          "不可以超出诊断项数量！目前诊断项有" +
            this.FeaturesTypeManageList.length +
            "个"
        );
      }
    },
    // 删除改行
    deleteRow(index, item) {
      this.disabledList = [];
      this.BOList.splice(index, 1);
      this.BOList.forEach((item) => {
        this.disabledList.push(item.diagnosisItemId);
      });
      let id = item.diagnosisItemId;
      let symbolList = item.diagnosisItemSymbolNoList;
      if (id) {
        this.selectNoList = this.selectNoList.filter((imgData) => {
          return imgData.diagnosisItemId != id;
        });
      }
      if (symbolList && symbolList.length) {
        symbolList.forEach((No) => {
          this.formData.diagnosisItemSymbolNoList =
            this.formData.diagnosisItemSymbolNoList.filter((symbol) => {
              console.log(symbol);
              return symbol != No;
            });
        });
      }
    },
    srcList(fileIdList) {
      let list = [];
      if (fileIdList.length > 0) {
        fileIdList.forEach((id) => {
          list.push(
            `${this.$baseurl.fileServiceUrl}base/files/preview?fileId=${id}`
          );
        });
      }
      return list;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.diseaseBank {
  padding: 15px 0;
}

::v-deep .slotModule {
  background: #00000000;
  box-shadow: none;
  padding: 0;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.select-box {
  padding: 15px;
  background-color: #ffffff;
  color: #4381b5;
  box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);

  .select-box-item {
    line-height: 26px;
    margin-bottom: 10px;

    .label {
      display: inline-block;
      width: 160px;
      text-align: right;
    }

    .children {
      width: calc(100% - 150px);
    }
  }
}

.select-box-container {
  min-height: 90px;
}

.flexItem {
  display: flex;
  flex-wrap: wrap;
}

.item {
  line-height: 26px;
  padding: 0 20px;
  background: #00b7ff1c;
  border: 1px solid #4381b5;
  margin-right: 10px;
  margin-bottom: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.itemActive {
  background-color: #4381b5;
  color: #ffffff;
}

.itemOpacity {
  opacity: 0.5;
}

.picture-box {
  height: 200px;
  display: flex;
  overflow-y: hidden;
}

.section {
  padding: 15px;
  background: #ffffff;
  margin-top: 10px;
  box-shadow: 0 6px 10px 0px rgba(0, 21, 41, 0.05);
}

.section-bottom {
  padding: 20px;
  margin-top: 10px;
  background-color: #f8f8f8;
  min-height: 275px;
  overflow-y: auto;

  .result-item {
    margin-bottom: 15px;
    border-bottom: 1px dashed #bebebe;
  }

  .result-item-row {
    margin-bottom: 10px;

    .result-item-row-title {
      display: inline-block;
      padding: 10px;
      margin-right: 15px;
      background: #4381b5;
      color: #ffffff;
      border-radius: 6px;
    }

    .result-item-row-content {
      font-size: 16px;
      line-height: 32px;
      color: #4381b5;
    }
  }
}

.diagnosis {
  margin: 10px;
  border: 1px solid #4381b5;

  .diagnosis-header {
    height: 30px;
    line-height: 30px;
    background: #4381b5;
    color: #ffffff;
    text-align: center;
  }

  .diagnosis-body {
    min-width: 300px;
    height: 145px;
    flex-wrap: wrap;
  }
}

.selected-box {
  margin-bottom: 10px;

  .selected-btn {
    padding: 5px 10px;
    margin: 0 5px;
    background: #4381b5;
    color: #ffffff;
    border-radius: 4px;
  }
}

.imgBox {
  .el-image {
    margin: 0 auto;
  }
}

.diagnosis-body-empty {
  width: 100%;
  text-align: center;
  display: inline-block;
  line-height: 100px;
}

.line-click {
  font-size: 20px;
  cursor: pointer;
}

.imageList {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

  .image {
    background-color: #8d8d8d1c;
    margin: 5px;
  }
}

.borderCard {
  .info {
    margin-bottom: 15px;
  }

  .label {
    font-weight: bold;
  }
}

.warningText {
  padding-left: 15px;
  cursor: pointer;
}
.diagnosisItem {
  width: calc(100% - 200px);
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
</style>